<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Hamilton Admin</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<!-- load the dojo toolkit base -->
		<style type="text/css">	
		
		@import "/lib/dojo-1.3.0/dojo/resources/dojo.css";
		@import "/lib/dojo-1.3.0/dijit/themes/dijit.css";
		@import "/lib/dojo-1.3.0/dijit/themes/nihilo/Tree.css";
		@import "/lib/dojo-1.3.0/dojox/grid/resources/Grid.css";
		@import "/lib/dojo-1.3.0/dojox/grid/resources/nihiloGrid.css";

		</style>
		<script type="text/javascript" src="../lib/dojo-1.3.0/dojo/dojo.js" djConfig="locale: 'se', isDebug: true, parseOnLoad: true, usePlainJson: true"></script>
		<script type="text/javascript">
		    dojo.require("dojox.data.JsonRestStore");
			dojo.require("dojox.grid.DataGrid");
			dojo.require("dijit._tree.dndSource");
			dojo.require("dijit.Tree");
			dojo.require("dijit.Menu");
			dojo.require("dijit.MenuItem");

			structure = new dojox.data.JsonRestStore({
				target:"/api/structure/",
				idAttribute:"idstructure",
				labelAttribute:"name",
				onSet:function(item,attribute,old,value){
					this.save();
				}
			});
			structure.fetch();
			//category = new dojox.data.JsonRestStore({target:"/api/category/",idAttribute:"idcategory",labelAttribute:"headline"});
			function genStructConMenu(e){
				myClickedNode = dijit.getEnclosingWidget(e.target);
			}
				//structure.fetch();
			dojo.addOnLoad(function(){
				/*
				category.onSet = function(id, value) {
					console.debug('PUT '+id+' = '+value);
				}
				*/
				/*var structureTreeModel = new dijit.tree.ForestStoreModel({
			        store: structure,
			        childrenAttrs: ["children"],
					});*/
				var structureTreeModel = new dijit.tree.TreeStoreModel({
			        store: structure,
			        query: {idstructure:1},
					labelAttr: 'name',
			        childrenAttrs: ["children"],
					mayHaveChildren: function(item){
						return item.children.length>0;
					}
					});
				var structureTree=new dijit.Tree({
			        model: structureTreeModel,
					dndController: "dijit._tree.dndSource",
					betweenThreshold:5,
					dragThreshold: 5
			    }, "structureTreeNode");
				
				var strConMen = dijit.byId("structureContextMenu");
				strConMen.bindDomNode(dojo.byId("structureTreeNode"));
				structureTree.myMenuHandle = dojo.connect(strConMen, "_openMyself", this,genStructConMenu);


/*
				gridLayout = [
				       { name: 'Name', field: 'name', editable: true},
				       { name: 'Slug', field: 'slug'}];
				var grid = new dojox.grid.DataGrid({
				       store: category,
				       structure: gridLayout
				}, dojo.byId("gridElement"));
				grid.startup();
	
				console.debug(structure);
				console.debug(structureTreeModel);
				console.debug(tree);*/
			});
		</script>
	</head>
	<body class="nihilo">
		<ul dojoType="dijit.Menu" id="structureContextMenu" style="display: none;">
        	<li dojoType="dijit.MenuItem" onClick="alert('Hello world');">Item #1</li>
        	<li dojoType="dijit.MenuItem">Item #2</li>
		</ul>

		<div id="gridElement"></div>
		<div id="structureTreeNode" openOnClick="true"></div>
	</body>
</html>
